<template>
    <div class="demo-container">
        <el-row>
            <el-col>
                <el-card>
                    <el-space>
                        <el-text>{{ count }}</el-text>
                        <el-text>{{ count_computed }}</el-text>
                        <el-button @click="handleAdd">ADD</el-button>
                    </el-space>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script  setup>
import { ref, computed, watch, onMounted } from "vue"
/**
 * 变量
 */
const count = ref(0);
/**
 * count 增加
 */
const handleAdd = () => {
    count.value++
}
/**
 * count 计算属性 结果*2
 */
const count_computed = computed(() => {
    return count.value * 2
})
/**
 * 监听 count_computed 变量
 */
watch(count_computed, (value) => {
  
})
/**
 * 组件 onMounted 生命周期方法回调
 */
onMounted(() => {
   
})
</script>

<style lang="scss" scoped></style>